import PicLoader from './module/PicLoader'
import VfxLoader from './module/VfxLoader'
import PageMonitor from "./module/PageMonitor"
import {Fps, Biribiri as Biu} from "./module/DataBus"
import {Connect} from './module/NetWork'

function epre(event) {
  if (event.cancelable) {
    // 判断默认行为是否已经被禁用
    if (!event.defaultPrevented) {
      event.preventDefault();
    }
  }
}

export default class Game {
  constructor(el) {
    this.name = 'Game Engine By Chen';
    // this.readymode='main';   //main /game
    this.readymode = 'game';      //main /game

    //绑定canvas标签
    this.el = el;
    this.canvas = document.getElementById(this.el);
    this.ctx = this.canvas.getContext('2d');
    let _this = this;
    //清除历史事件侦听（貌似没有卵用）
    // if(this.display) {
    //   document.removeEventListener('touchstart', (event) => {
    //     epre(event)
    //   });
    //   document.removeEventListener('touchmove', (event) => {
    //     epre(event)
    //   });
    //   document.removeEventListener('touchend', (event) => {
    //     epre(event)
    //   });
    //   this.canvas.removeEventListener('touchstart', (event) => {
    //     _this.touchStart(event);
    //   });
    //   this.canvas.removeEventListener('touchmove', (event) => {
    //     _this.touchMove(event);
    //   });
    //   this.canvas.removeEventListener('touchend', (event) => {
    //     _this.touchEnd(event);
    //   });
    //   this.display=window.clearInterval(this.display);
    // }
    this.load();
    this.mode = 'load';
    this.pl = new PicLoader();
    this.vl = new VfxLoader();
    this.pm = null;
    //加载元件
    this.finished = false;
    this.display = null;
    this.wait = window.setInterval(() => {
      this.waitforFin()
    }, 500);
    //建立网络连接
    this.connect = new Connect();
    //初始化震动
    document.addEventListener('touchstart', (event) => {
      epre(event)
    }, false);
    document.addEventListener('touchmove', (event) => {
      epre(event)
    }, false);
    document.addEventListener('touchend', (event) => {
      // e.preventDefault();
      epre(event)
    }, false);
  }

  waitforFin() {
    if (this.finished) {
      //加载完成 矫正屏幕比例
      let clientWidth = document.documentElement.clientWidth;
      let clientHeight = document.documentElement.clientHeight;
      let canvasWidth = Math.floor(clientWidth);
      let canvasHeight = Math.floor(clientHeight);
      this.canvas.setAttribute('width', canvasWidth + 'px');
      this.canvas.setAttribute('height', canvasHeight + 'px');
      //添加触控检测
      let _this = this;
      this.canvas.addEventListener('touchstart', function (event) {
        _this.touchStart(event);
      }, {passive: false});
      this.canvas.addEventListener('touchmove', function (event) {
        _this.touchMove(event);
      }, {passive: false});
      this.canvas.addEventListener('touchend', function (event) {
        _this.touchEnd(event);
      }, {passive: false});
      //清除等待状态
      window.clearInterval(this.wait);
      this.pm = new PageMonitor(this);
      this.display = window.setInterval(() => {
        this.work()
      }, 1000 / Fps);
      // window.clearInterval(this.display);
    } else {
      //等待图片加载完成
      let PicF = this.pl.finished();
      //等待音频加载完成
      let VfxF = this.vl.finished();
      this.load({PicF, VfxF});
      //全部加载完成
      if (PicF.all === PicF.fin && VfxF.all === VfxF.fin) {
        this.finished = true;
        console.log('全部加载完成');
        this.mode = this.readymode;   //正常直接进入等待界面
      }
    }
  }

  work() {
    //按1000/(Fps)秒显示
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.pm.display(this.mode, this);
  }

  load(arg) {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.ctx.font = '20px 宋体';
    let gradient = this.ctx.createLinearGradient(0, 0, this.canvas.width, 0);
    gradient.addColorStop("0", "black");
    gradient.addColorStop("0.5", "grey");
    gradient.addColorStop("1.0", "black");
    this.ctx.fillStyle = gradient;
    this.ctx.fillText('加载中...', document.documentElement.clientWidth / 2 + 25, document.documentElement.clientHeight / 2 + 100);
    if (arg) {
      this.ctx.fillText('(' + (arg.PicF.fin + arg.VfxF.fin) + '/' + (arg.PicF.all + arg.VfxF.all) + ')', document.documentElement.clientWidth / 2 + 25, document.documentElement.clientHeight / 2 + 130);
    }
  }

  touchStart(event) {
    // console.log(event);
    // navigator.vibrate(1000);
    this.pm.touchStart(event, this.mode);
  }

  touchMove(event) {
    this.pm.touchMove(event, this.mode);
  }

  touchEnd(event) {
    this.pm.touchEnd(event, this.mode);
    // console.log(event);
  }
}
